<template>
  <div class="page">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="venueName" label="场地名称" sortable></el-table-column>
      <el-table-column prop="bookingDate" label="预约时间" sortable></el-table-column>
      <el-table-column prop="status" label="预约状态" sortable>
        <template #default="scope">
          <el-tag :type="statusTagType[scope.row.status]" effect="light" round>
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="预约用户" sortable></el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button 
            type="primary" 
            size="small" 
            :icon="Edit" 
            @click="openStatusDialog(scope.row)"
          >修改状态</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 状态修改对话框 -->
    <el-dialog v-model="statusDialogVisible" title="修改预约状态" width="30%">
      <el-form :model="currentReservation">
        <el-form-item label="选择状态" prop="status">
          <el-select v-model="currentReservation.status" placeholder="请选择状态">
            <el-option
              v-for="item in statusOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="statusDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateStatus">确认修改</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'
import { Refresh, Edit } from '@element-plus/icons-vue'

const tableData = ref([])
const statusDialogVisible = ref(false)
const currentReservation = ref({ id: null, status: '' })

// 状态显示配置
const statusTagType = {
  '审核中': 'warning',
  '已接受': 'success',
  '已拒绝': 'danger'
}

const statusOptions = ['审核中', '已接受', '已拒绝']

// 获取预约数据
const getReservationData = async () => {
  try {
    const response = await request.get('/getReservationOverview')
    if (response.data.code === 200) {
      tableData.value = response.data.data
    }
  } catch (error) {
    ElMessage.error('数据加载失败')
  }
}

// 打开修改对话框
const openStatusDialog = (row) => {
  currentReservation.value = { id: row.id, status: row.status }
  statusDialogVisible.value = true
}

// 提交状态修改
const updateStatus = async () => {
  try {
    await request.put(`/updateReservationStatus/${currentReservation.value.id}`, {
      status: currentReservation.value.status
    })
    ElMessage.success('状态修改成功')
    await getReservationData()
    statusDialogVisible.value = false
  } catch (error) {
    ElMessage.error('修改失败')
  }
}

// 初始化加载数据
onMounted(() => {
  getReservationData()
})
</script>

<style scoped>
.header-actions {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}

.el-tag {
  margin: 2px;
  font-weight: 500;
}
</style>